<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Travel</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.0/css/fontawesome.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.0/css/brands.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.0/css/solid.min.css">
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<nav class="w">
				<div class="logo">
					<img src="img/logo-en.png">
				</div>
				<div class="header-x-nav">
					<ul>
						<li><a href="#who">who we are</a></li>
						<li><a href="#service">service</a></li>
						<li><a href="#team">team</a></li>
						<li><a href="#achievement">achievement</a></li>
						<li><a href="#travel">travel gallery</a></li>
						<li><a href="#testimonials">testimonials</a></li>
					</ul>
				</div>
				<div class="menu">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</nav>
			<ul class="header-xs-nav">
				<li><a href="#who">who we are</a></li>
				<li><a href="#service">service</a></li>
				<li><a href="#team">team</a></li>
				<li><a href="#achievement">achievement</a></li>
				<li><a href="#travel">travel gallery</a></li>
				<li><a href="#testimonials">testimonials</a></li>
			</ul>
		</header>

		<!-- 幻灯片 -->
		<section class="swiper">
			<div class="banner">
				<img src="" alt="" id="slider">
			</div>
		</section>
		<!-- Who we are -->
		<section class="about w" id="who">
			<div class="text" id="who">
				<h1 style="font-size: 34px;">Who we are</h1>
				<p>We are a professional free travel service team!</p>
				<p>We provide various services such as free travel planning, residential accommodation, car rental, and rural
					trekking route information.</p>
				<button type="button">more</button>
			</div>
			<div class="box-img w">
				<div class="imgle">
					<img src="img/lake1_160_200.jpg">
				</div>
				<div class="imgrt">
					<img src="img/lake1_320_400.jpg">
				</div>
			</div>
		</section>
		<!-- Service -->
		<section class="Service" id="service">
			<h1 style="text-align: center; color: #0085AD;font-size: 34px;">Service</h1>
			<div class="services w">
				<div class="left">
					<img src="img/service1.jpg">
					<p class="title" style="color: #0085AD;">Free travel planning</p>
					<p class="txt" style="font-size: 14px;">We have a dedicated team <br /> to plan your journey for you</p>
				</div>
				<div class="middle">
					<img src="img/service2.jpg">
					<p class="title" style="color: #0085AD;">Residential accommodation arrangements</p>
					<p class="txt" style="font-size: 14px;"> We have a lot of home information</p>
				</div>
				<div class="right">
					<img src="img/service3.jpg">
					<p class="title" style="color: #0085AD;">Country trekking guide</p>
					<p class="txt" style="font-size: 14px;">For country trekking, we will arrange a local guide for you</p>
				</div>
			</div>
		</section>
		<!-- Team -->
		<section class="teams w" id="team">
			<h1 style="text-align: center;color: #0085AD;font-size: 34px;">Team</h1>
			<p style="text-align: center;color: #009FD3; padding-top: 24px;">We have different teams for different services. <br>The
				market
				development team is responsible for the development of the global market.</p>
			<div class="teams-img">
				<img src="img/leaders.jpg">
			</div>
		</section>
		<!-- Achievement -->
		<section>
			<div class="achievement w" id="achievement">
				<h1 style="text-align: center;color: #0085AD;font-size: 34px;">Achievement</h1>
				<ul class="icons">
					<li>
						<div class="icon">
							<span class="fas fa-clipboard-list fa-3x"></span>
							<p class="at-txt">23</p>
						</div>
					</li>
					<li>
						<div class="icon">
							<span class="fas fa-globe-asia fa-3x"></span>
							<p class="at-txt">187,698</p>
						</div>
					</li>
					<li>
						<div class="icon">
							<span class="fa fa-car fa-3x"></span>
							<p class="at-txt">301,343</p>
						</div>
					</li>
					<li>
						<div class="icon">
							<span class="fa fa-camera-retro fa-3x"></span>
							<p class="at-txt">36%</p>
						</div>
					</li>
				</ul>
			</div>
		</section>
		<!-- Travel Gallery -->
		<section class="travel w" id="travel">
			<h1 style="text-align: center;color: #0085AD;font-size: 34px;">Travel Gallery</h1>
			<div class="grid">
				<div class="grid-boxs">
					<img src="img/hike1_300_200.jpg" alt="Follow the stream" id="myImg">
					<p class="tr-title">Follow the stream</p>
				</div>
				<div class="grid-boxs">
					<img src="img/hike2_300_200.jpg" alt="Climb high and look into the distance">
					<p class="tr-title">Climb high and look into the distance</p>
				</div>
				<div class="grid-boxs">
					<img src="img/hike3_299_200.jpg" alt="Head towards the snow-covered">
					<p class="tr-title">Head towards the snow-covered </p>
				</div>
				<div class="grid-boxs">
					<img src="img/hike4_300_200.jpg" alt="Hiking in the countryside">
					<p class="tr-title">Hiking in the countryside</p>
				</div>
				<div class="grid-boxs">
					<img src="img/dom1_300_200.jpg" alt="Country Inn">
					<p class="tr-title">Country Inn</p>
				</div>
				<div class="grid-boxs">
					<img src="img/dom2_300_200.jpg" alt="A simple country house">
					<p class="tr-title">A simple country house</p>
				</div>
				<div class="grid-boxs">
					<img src="img/countryside1_600_400.jpg" alt="Lake · Summer">
					<p class="tr-title">Lake · Summer</p>
				</div>
				<div class="grid-boxs">
					<img src="img/lake2_301_200.jpg" alt="Lake · Fall">
					<p class="tr-title">Lake · Fall</p>
				</div>
				<div class="grid-boxs">
					<img src="img/ride1_355_200.jpg" alt="Highland cycling">
					<p class="tr-title">Highland cycling</p>
				</div>
			</div>
		</section>

		<!-- The Modal -->
		<div id="myModal" class="modal">
			<span class="close">×</span>
			<img class="modal-content" id="img01">
			<div id="caption"></div>

		</div>

		<!-- Testimonial -->
		<section class="testimonial w" id="testimonials">
			<h1 style="text-align: center;color: #0085AD;font-size: 34px;">Testimonial</h1>
			<div class="testimonials">
				<div class="test-bd">
					<img src="img/client1.jpg">
					<p>Mr. White, a company manager<br>I got a truly free travel. I felt the beauty of China's nature and
						the enthusiasm of Chinese people!</p>
				</div>
				<div>
					<div class="test-bd2">
						<img src="img/client2.jpg">
						<p>Ms. Stone, doctor<br>This free tour is really great! Thank you for all the arrangements and help from your
							company.</p>
					</div>
				</div>
				<div>
					<div class="test-bd">
						<img src="img/client3.jpg">
						<p>Miss Whitney, a company secretary<br>I am traveling freely in Hungary this time, and it feels really great!
							Thank you for your professional support.</p>
					</div>
				</div>
				<div>
					<div class="test-bd2">
						<img src="img/client4.jpg">
						<p>Mr. Smith, retired teacher<br>Thank you for providing me with such a good opportunity from the walk-and-go
							travel service company.</p>
					</div>
				</div>
			</div>
		</section>
		<!-- Footer -->
		<footer>
			<div class="bd w">
				<dl>
					<dt>Contact Info</dt>
					<dd>
						<a href="">Address: Room 1201, A Building, A Road, Chongwen District, Beijing</a>
					</dd>
					<dd>
						<a href="">Email: service@szjz.com</a>
					</dd>
					<dd>
						<a href="">Tel: 86-010-876908765</a>
					</dd>
				</dl>
				<dl>
					<dt>Quick Links</dt>
					<dd>
						<a href="">Introduction of company</a>
					</dd>
					<dd>
						<a href="">Contact information of branches all over the world</a>
					</dd>
					<dd>
						<a href="">Typical travel plan reference</a>
					</dd>
					<dd>
						<a href="">Frequently Asked Questions</a>
					</dd>
					<dd>
						<a href="">Contact US</a>
					</dd>
				</dl>
				<dl>
					<dt>Wonderful video</dt>
					<dd>
						<video width="280" height="170" controls>
							<source src="videos/hiking.mp4" type="video/mp4">
					</dd>
				</dl>
			</div>
		</footer>

		<script type="text/javascript">
			// 幻灯片切换
			let index = 0;
			let imgArray = ["img/slider01.jpg", "img/slider02.jpg", "img/slider03.jpg", "img/slider04.jpg"];

			autoSlider()

			function autoSlider() {
				let img = document.querySelector("#slider")
				if (index < imgArray.length - 1) {
					index++;
				} else {
					index = 0;
				}
				img.src = imgArray[index];
			}
			setInterval(autoSlider, 2000);


			// 获取模态窗口
			let modal = document.querySelector('#myModal');
			// 获取所有模态框
			let modelall = document.querySelectorAll('.grid-boxs');
			// console.log(modelall);
			// modelall.onclick(res=>{
			// 	console.log(res);
			// })

			// 获取图片模态框，alt 属性作为图片弹出中文本描述
			let img = document.querySelector('#myImg');
			let modalImg = document.querySelector("#img01");
			let captionText = document.querySelector("#caption");
			for (let i = 0; i < modelall.length; i++) {
				let modelclick = modelall[i];

				modelclick.onclick = () => {
					modal.style.display = "block";
					modalImg.src = modelclick.querySelector('img').src;
					modalImg.alt = modelclick.querySelector('img').alt
					captionText.innerHTML = modelclick.querySelector('img').alt;
				}

			}
			// 获取 <span> 元素，设置关闭模态框按钮
			let span = document.getElementsByClassName("close")[0];

			// 关闭模态框
			span.onclick = () => {
				modal.style.display = "none";
			}

			//汉堡菜单
			let meun = document.querySelector('.menu');
			let xs = document.querySelector('.header-xs-nav');
			let flag = 0;
			meun.addEventListener('click', () => {
				if (flag == 0) {
					xs.style.display = 'block';
					flag = 1;
				} else {
					xs.style.display = 'none';
					flag = 0;
				}
			});
		</script>

	</body>

</html>
